import React, { useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { EXAMPLES_COUNTER_PLUS_ONE } from '../redux/constants';

export const Counter = () => {
  const { count } = useSelector((state: any) => state.home)
  const dispatch = useDispatch()
  const addCounter = useCallback(() => dispatch({type: EXAMPLES_COUNTER_PLUS_ONE}), [dispatch])

  return (
    <div className="counter">
      <span className="number">count: {count}</span>
      <button
        className="btn"
        onClick={addCounter}
      >
          + 1
      </button>
    </div>
  )
}